聊天室元件 index.vue
<div class="chat">
<div class="rooms">
<div class="room">
<div>
<el-avatar :size="60" :src="'https://picsum.photos/60'"></el-avatar>
</div>
<div class="text-block">
<span>阿君</span>
<div>你好嗎</div>
</div>
<div class="日期">星期日</div>
</div>
</div>
<div class="messages">b</div> </div>
style.scss
@import "../../assets/scss/_variables";
.chat{ display:flex; height: 100%; }
.rooms{ flex-basis:260px; background-color:red; }
.messages{ flex-grow: 1; background-color:black; }
.room > *{ display: inline-block; }